<template>
	<div class="city">
		<div class="searchLetter touchClass">
			<div class="thishotText">
				<div style="margin-top:0;" data-id='current' @click="currentCity">当前</div>
				<div style="margin-top:20rpx;" data-id='hot' @click="hotCity">热门</div>
			</div>
			<div v-for="item in searchLetter" :key="searchLetter" style="color:#2ab4ff;font-size:20rpx;" :data-letter="item.name" @click="clickLetter">{{item.name}}</div>
		</div>
		<scroll-view :scroll-y="true" :style="{height:winHeight+'px'}" :scroll-into-view="scrollTopId" scroll-y="true" bindscroll="scroll">
			<div class="hotcity-common thisCity" id="current">当前选择城市</div>
			<div class="thisCityName">{{city}}</div>

			<p class="hotcity hotcity-common" id="hot">热门城市</p>
			<div class="weui-grids">
				<div v-for="hotcityList in hotcityList" :key="hotcityList">
					<div class="weui-grid" :data-cityCode="hotcityList.cityCode" :data-city="hotcityList.city" @click="bindHotCity">
						<div class="weui-grid__label">{{hotcityList.city}}</div>
					</div>
				</div>
			</div>

			<div class="selection" v-for="(cityList,cityindex) in cityList" :id="cityList.initial" :key="cityList.initial">
				<div class="item_letter">{{cityList.initial}}</div>
				<div class="item_city" v-for="(ct,ctindex) in cityList.cityInfo" :key="ct.id" :data-cityCode="ct.code" :data-city="ct.city" @click="bindCity">
					{{ct.city}}
				</div>
			</div>
		</scroll-view>
	</div>
</template>

<script>
	var city = require('../../../static/js/city.js')
	export default {
		data() {
			return {
				searchLetter: [],
				winHeight: 0,
				cityList: [],
				isShowLetter: false,
				scrollTopId: '', //置顶id
				hotcityList: [{
					city: '北京市'
				}, {
					city: '上海市'
				}, {
					city: '广州市'
				}, {
					city: '深圳市'
				}, {
					city: '杭州市'
				}, {
					city: '南京市'
				}, {
					city: '武汉市'
				}, {
					city: '郑州市'
				}, {
					city: '天津市'
				}, {
					city: '西安市'
				}, {
					city: '成都市'
				}, {
					city: '重庆市'
				}],
				city: "正在点位中",
			}
		},
		onLoad: function() {
			wx.setNavigationBarTitle({
				title: "当前城市"
			})
			this.getcity();

		},
		onReady: function() {
			this.getLocation();
		},
		methods: {
			getLocation:function(){
				var that = this;
				wx.getLocation({
					type:'wgs84',
					success:function(res){
						var latitude = res.latitude;
						var longitude = res.longitude;
						that.loadCity(latitude,longitude)
					}
				})
			},
			loadCity:function(latitude,longitude){
				var that = this;
				wx.request({
					url:"https://api.map.baidu.com/geocoder/v2/?ak=FbOVDGKujpeGYyTNc9nFoONSCadKu0CH&location=" + latitude + "," + longitude + "&output=json",
					success:function(res){
						that.city = res.data.result.addressComponent.city;
					}
					
				})
			},
			getcity: function() {
				var searchLetter = city.searchLetter;
				var cityList = city.cityList();
				var sysInfo = wx.getSystemInfoSync();
				var winHeight = sysInfo.windowHeight;
				var itemH = winHeight / searchLetter.length;
				var tempObj = [];
				for(var i = 0; i < searchLetter.length; i++) {
					var temp = {};
					temp.name = searchLetter[i];
					temp.tHeight = i * itemH;
					temp.bHeight = (i + 1) * itemH;
					tempObj.push(temp)
				}
				this.winHeight = winHeight;
				this.itemH = itemH;
				this.searchLetter = tempObj;
				this.cityList = cityList;
			},
			clickLetter: function(e) {
				var showLetter = e.currentTarget.dataset.letter;
				this.scrollTopId = showLetter;
			},
			hotCity: function(e) {
				var showLetter = e.currentTarget.dataset.id;
				this.scrollTopId = showLetter;
			},
			currentCity: function(e) {
				var showLetter = e.currentTarget.dataset.id;
				this.scrollTopId = showLetter;
			},
			bindCity:function(e){
				var city = e.currentTarget.dataset.city;
				wx.reLaunch({
					url: '/pages/index/main?city=' + city
				});
				
			},
			bindHotCity:function(e){
				var city = e.currentTarget.dataset.city;
				wx.reLaunch({
					url: '/pages/index/main?city=' + city
				});
			}
		}
	}
</script>

<style>
	.searchLetter {
		position: fixed;
		right: 0;
		width: 50rpx;
		text-align: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		color: #666;
		z-index: 1;
	}
	
	.searchLetter view {
		margin-top: 20rpx;
	}
	
	.touchClass {
		background-color: #fff;
		color: #fff;
		padding-top: 46rpx;
	}
	
	.showSlectedLetter {
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 50%;
		left: 50%;
		margin: -100rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		font-size: 52rpx;
		z-index: 1;
	}
	
	.selection {
		display: flex;
		width: 100%;
		flex-direction: column;
		margin-top: 10rpx;
	}
	
	.item_letter {
		display: flex;
		background-color: #f5f5f5;
		height: 40rpx;
		padding-left: 34rpx;
		align-items: center;
		font-size: 24rpx;
		color: #666;
	}
	
	.item_city {
		display: flex;
		background-color: #fff;
		height: 100rpx;
		padding-left: 34rpx;
		align-items: center;
		border-bottom: 1rpx solid #ededed;
		font-size: 24rpx;
		color: #666;
	}
	
	.hotcity-common {
		font-size: 24rpx;
		color: #666;
		padding: 0 0 0 30rpx;
	}
	
	.thisCity {
		padding-top: 30rpx;
	}
	
	.thisCityName {
		display: inline-block;
		border: 1rpx solid #2ab4ff;
		border-radius: 8rpx;
		padding: 10rpx 0;
		font-size: 24rpx;
		color: #2ab4ff;
		text-align: center;
		min-width: 149.5rpx;
		margin: 20rpx 0 20rpx 30rpx;
	}
	
	.thishotText {
		color: #2ab4ff;
		font-size: 20rpx;
		margin: 0 !important;
	}
	
	.slectCity {
		border-color: #2ab4ff !important;
	}
	
	.slectCity view {
		color: #2ab4ff !important;
	}
	
	.weui-grid {
		position: relative;
		float: left;
		padding: 10rpx 0;
		width: 149.5rpx;
		box-sizing: border-box;
		border: 1rpx solid #ececec;
		border-radius: 8rpx;
		margin: 10rpx 12rpx;
	}
	
	.weui-grid__label {
		display: block;
		text-align: center;
		color: #333;
		font-size: 24rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>